/* jshint esnext: true */
const snabbdom = window.snabbdom;
const {
    init,
    h
} = snabbdom;
var patch = init([
    snabbdom_class,
    snabbdom_props,
    snabbdom_style,
    snabbdom_eventlisteners
]);

const movies = new Movies();
const sortBy = movies.sortBy;
var vnode
var margin = 8;
var totalHeight = 0;

const view = (data) => {
    return h("div", [
        h("h1", "Top 10 movies"),
        h("div", [
            h("a.btn.add", {
                on: {
                    click: [movies.add, render]
                }
            }, "Add"),
            "Sort by: ",
            h("span.btn-group", [
                h(
                    "a.btn.rank", {
                        class: {
                            active: sortBy === "rank"
                        },
                        on: {
                            click: [movies.sort, "rank", render]
                        },
                    },
                    "Rank"
                ),
                h(
                    "a.btn.title", {
                        class: {
                            active: sortBy === "title"
                        },
                        on: {
                            click: [movies.sort, "title", render]
                        },
                    },
                    "Title"
                ),
                h(
                    "a.btn.desc", {
                        class: {
                            active: sortBy === "desc"
                        },
                        on: {
                            click: [movies.sort, "desc"]
                        },
                    },
                    "Description"
                ),
            ]),
        ]),
        h(
            "div.list", {
                style: {
                    height: totalHeight + "px"
                }
            },
            data.map(movieView)
        ),
    ]);
}

const movieView = (movie) => {
    return h(
        "div.row", {
            key: movie.rank,
            style: {
                opacity: "0",
                transform: "translate(-200px)",
                delayed: {
                    transform: `translateY(${movie.offset}px)`,
                    opacity: "1"
                },
                remove: {
                    opacity: "0",
                    transform: `translateY(${movie.offset}px) translateX(200px)`,
                },
            },
        },
        [
            h("div", {
                style: {
                    fontWeight: "bold"
                }
            }, movie.rank),
            h("div", movie.title),
            h("div", movie.desc),
            h("div.btn.rm-btn", {
                on: {
                    click: [movies.remove, movie, render]
                }
            }, "x"),
        ]
    );
}


const render = (data) => {
    vnode = patch(vnode, view(data));
}

window.addEventListener("DOMContentLoaded", () => {
    const data = movies.data;
    var container = document.getElementById("container");
    vnode = patch(container, view(data));
    render(data);
});